.<template>
  <div class="courseMain">
      <div class="add_course_background" id="add_course_background" @click="course_add_close">
        <div class="add_course" @click.stop="course_stopEvent">
          <el-form :inline="true">
        <el-form-item label="course Name:">
          <el-input v-model="course_add_courseName" placeholder="course Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="course_post_add">
            Add
          </el-button>
        </el-form-item>
      </el-form>
        </div>
      </div>

      <div class="modify_course_background" id="modify_course_background"  @click="course_modify_close">
       <div class="modify_course" @click.stop="course_stopEvent">
          <el-form :inline="true">
        <el-form-item label="course Name:">
          <el-input v-model="course_modify_courseName" placeholder="course Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="course_post_modify">
            modify
          </el-button>
        </el-form-item>
      </el-form>
        </div>
      </div>

      <div class="course_search">
        <el-form :inline="true">
        <el-form-item label="course Name:">
          <el-input v-model="course_search_courseName" placeholder="course Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="btn_course_search">
            Search
          </el-button>
        </el-form-item>
      </el-form>
      </div>
      <div class="course_add_btn">
      <el-button type="primary" v-on:click="btn_course_add">
            Add
          </el-button>
      </div>
      <div class="course_table">
        <el-table :data="course_table_data" @row-click="course_details">
        <el-table-column prop="no" label="ID"></el-table-column>
        <el-table-column prop="courseName" label="course name"></el-table-column>
        <el-table-column label="Action">
          <el-button @click="btn_course_modify">Modify</el-button>
        </el-table-column>
      </el-table>
      </div>
      <div class="page_nav_course">
        <el-pagination
        @current-change="course_page_handelchange"
        :current-page.sync="course_currentPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="course_totalCount"
      >
      </el-pagination>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      course_add_courseName:"",
      course_modify_courseName:"",
      course_search_courseName:"",
      course_table_data:[],
      course_totalCount:0,
      course_modify_id:-1,
      course_currentPage:0
    }
  },
  methods: {
    course_details(row){
      this.course_modify_courseName = row.courseName;
      this.course_modify_id = row.id;
    },
    btn_course_search(){
      this.course_get_courseData(1,this.course_search_courseName);
    },
    btn_course_modify(){
      document.getElementById("modify_course_background").style.display="block";
    },
    course_modify_close(){
      document.getElementById("modify_course_background").style.display="none";
      this.course_modify_courseName = "";
    },
    btn_course_add(){
      document.getElementById("add_course_background").style.display="block";
    },
    course_add_close(){
      document.getElementById("add_course_background").style.display="none";
      this.course_add_courseName = "";
    },
    course_stopEvent(){
    },
    course_post_add(){

      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");

      let courseName = this.course_add_courseName;
      let that = this;
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/addCourse",
        data: JSON.stringify({
         operator:user.uid,
         name:courseName
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          alert("Add succeed");
          that.course_add_courseName = "";
          that.course_add_close();
          that.course_get_courseData(1,"");
        } else {
          alert(result.data.msg);
        }
      });
    },
    course_post_modify(){
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");

      let courseName = this.course_modify_courseName;
      let that = this;
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/modifyCourse",
        data: JSON.stringify({
         operator:user.uid,
         id:that.course_modify_id,
         name:courseName
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          alert("Modify succeed");
          that.course_modify_courseName = "";
          that.course_modify_close();
        } else {
          alert(result.data.msg);
        }
      });
    },
    course_get_courseData(pageNo,courseName){
      if(pageNo==null){
        pageNo = 1;
      }
      let token = sessionStorage.getItem("token");
      let that = this;

      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/course-info/getCourseInfo",
        params:{
          pageNo:pageNo,
          name:courseName
        }
        
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          let x=1
          for(let i of result.data.data.data){
            i.no = x++;
          }
          that.course_table_data = result.data.data.data;
          that.course_totalCount = result.data.data.totalCount;
          that.course_currentPage = result.data.data.pageNo;
        } else {
          alert(result.data.msg);
        }
      });
    },
    course_page_handelchange(val){
      this.course_get_courseData(val)
    }
  },
  mounted() {
    this.course_get_courseData(1)
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.course_add_btn{
  width: 100%;
  height: 8%;
  text-align: left;
  padding-left: 50px;
}
.courseMain{
    width:100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    box-shadow: gray 5px 5px 10px;
}
.course_search{
  padding-top: 20px;
  width: 100%;
  height: 10%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px 15px 0px 0px;
}
.add_course{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.add_course_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.modify_course{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_course_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
</style>